<template>
	<div id="app">
		<p>会员卡充值页面</p>
		<el-divider></el-divider>
		<div class="card01">
			<ul class="care_chongzhi_01">
				<li id="first">
					<el-button type="info" @click='getValue()'>10元 50积分</el-button>
				</li>
				<li>
					<el-button type="info" index='2' @click='getValue()'>20元 110积分</el-button>
				</li>
				<li>
					<el-button type="info" index='3' @click='getValue()'>50元 650积分</el-button>
				</li>
				<li>
					<el-button type="info" index='4' @click='getValue()'>100元 1500积分</el-button>
				</li>
			</ul>
		</div>
		<el-divider></el-divider>
		<div id="zhifu">
			<p style="padding-bottom: 20px; padding-left: -10px;">支付金额:{{zhifu}} </p>
			<img src="../../images/021.jpg" alt="">
		</div>
		<el-button type="primary" style='position: absolute; top: 450px;left: 300px;' @click='chongzhi();getValue()'>立即充值</el-button>

	</div>
</template>

<script>
	import axios from 'axios'
	import store from  "../../store/modules/user.js"
	export default {
		data() {
			return {
				zhifu: '',
				id: store.state.user.id,
			}
		},
		created() {

		},
		methods: {
			getValue() {
				const value = event.target.innerHTML;
				console.log(value);
				const first = value.lastIndexOf("元");
				const va = value.substring(0, first);
				localStorage.setItem("value",value)
                var it =''
				for (var i = 0; i < va.length; i++) {
					
					if(va[i] >= '0' && va[i] <='9' ){
						it+=va[i]
					}
					
				}
				this.zhifu = it
			},
			chongzhi(){
				
				if(this.zhifu===''){
					alert("未选择支付金额")
				}
				else {
					  const value =localStorage.getItem("value");
					  var str=''
					  for(var i=0;i<value.length;i++){
						  if(value[i]!='<'&&value[i]!='>'&&value[i] != '-' && value[i] != '!' && value[i] !='s' && value[i] != 'p' && value[i] !='a' && value[i] != 'n' && value[i] !='/'  )
						  {
							  str+=value[i]
						  }
					  }
					  console.log(str);
					  console.log(this.id);
						const getPay = axios.get("/getPay?count=" + this.zhifu + "&message=" + str + "&id="+this.id)
							.then(function(data) {
								console.log(data);
								// 新窗口打开
								//支付宝支付
								 if(data.status=="200"){
								 // 添加之前先删除一下，如果单页面，页面不刷新，添加进去的内容会一直保留在页面中，二次调用form表单会出错
								 let divForm = document.getElementsByTagName('divform')
								    if (divForm.length) {
								      document.body.removeChild(divForm[0])
								    }
								     const div=document.createElement('divform');
								     div.innerHTML=data.data; // data就是接口返回的form 表单字符串
								     document.body.appendChild(div);
								     document.forms[0].setAttribute('target', '_blank') // 新开窗口跳转
								     document.forms[0].submit();
								 }else{
								      alert("错误："+data.data,"提示",{
								         confirmButtonText:'确定'
								     });
								 }
								
								
							}).catch(function(Error) {
								console.log(Error);
							});
				
					
					
					
					// this.$router.push({
					// 	path:'zhifubao'
					// })
				}
		
			},
			
		},

	}
</script>

<style scoped>
	#first {
		margin-left: 200px;
	}

	#app {
		width: 1200px;
		margin: 0 auto;
	}

	.card01 {
		height: 70px;
	}

	#zhifu {
		position: absolute;
		top: 300px;
		left: 200px;
	}

	.care_chongzhi_01 li {
		height: 30px;
		margin-left: 30px;
		float: left;
	}
</style>
